<template>
  <div class="p-3">
    <div class="stepBox p-3">
      <div class="t-1">订单状态</div>
      <div class="rp-Box">
        <el-steps style="min-width: 900px" :space="200" :active="3" align-center>
          <el-step title="买家下单" description="2024-05-16 12:45:16" />
          <el-step title="卖家发货" description="2024-05-16 12:45:16" />
          <el-step title="买家收货" />
          <el-step title="买家评价" />
        </el-steps>
      </div>
    </div>
    <div class="address mt-3 p-3">
      <div class="top">
        <div class="title">收货人信息</div>
        <div class="edit ml-4">编辑</div>
      </div>
      <el-form label-width="auto" class="mt-6" label-position="left">
        <el-row style="width: 700px" :gutter="20">
          <el-col :span="12">
            <el-form-item label="收货人姓名">
              <el-input disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人电话">
              <el-input disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收货地址">
              <el-input style="width: 100%" :autosize="{ minRows: 2, maxRows: 4 }" resize="none" type="textarea"
                disabled placeholder="Please input" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="留言备注">
              <el-input style="width: 100%" :autosize="{ minRows: 2, maxRows: 4 }" resize="none" type="textarea"
                disabled placeholder="Please input" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="address mt-3 p-3">
      <div class="top">
        <div class="title">商品信息</div>
      </div>
      <el-table :data="tableData" style="width: 100%" :border="true" class="mt-3" size="small"
        :header-cell-style="{ backgroundColor: '#f2f4f9', color: '#333333' }">
        <el-table-column label="商品信息" width="240" :align="'center'">
          <template #default="scope">
            <div class="tab" v-for="(item, i) in [0]" :key="i">
              <img class="img" src="@/assets/images/tx.png" alt="" />
              <div class="line2 w-250">
                {{
                  "花园庭院户外造景阳台雕塑装饰品促销创意幼儿园卡通蜗牛动物摆件"
                }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" :align="'center'" prop="sku" />
        <el-table-column label="单价" :align="'center'">
          <template #default="scope">
            <div>￥39.90</div>
          </template>
        </el-table-column>
        <el-table-column label="数量" :align="'center'">
          <template #default="scope">
            <div>x2</div>
          </template>
        </el-table-column>
        <el-table-column label="合计(元)" :align="'center'">
          <template #default="scope">
            <div>￥79.80</div>
          </template>
        </el-table-column>
        <el-table-column label="发货状态" :align="'center'">
          <template #default="scope">
            <div>已发货</div>
          </template>
        </el-table-column>
        <el-table-column label="优惠券信息" :align="'center'">
          <template #default="scope">
            <div style="display: flex; justify-content: center">
              <div style="width: fit-content">
                <div>新人立减劵</div>
                <div style="text-align: right; color: #ff4c4c">-10</div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="address mt-3 p-3 pb-1">
      <div class="top">
        <div class="title">订单信息</div>
      </div>
      <el-row class="mt-2">
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">
            订单编号：98456121231321548877
            <div class="etxt ml-3">复制</div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">支付方式：微信支付</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">商品总价：￥79.80</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">下单时间：2024-05-15 20:12:45</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">订单类型：实物商品</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">运费：￥0.00</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">支付时间：2024-05-15 20:12:45</div>
        </el-col>
        <el-col :span="8" :xs="24">
          <div class="infoItem">订单来源：APP</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">优惠：￥10.00</div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem"></div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">
            订单备注：无
            <div class="etxt ml-3">编辑备注</div>
          </div>
        </el-col>
        <el-col :span="8" :xs="24" class="mb-3">
          <div class="infoItem">本单实收：￥69.80</div>
        </el-col>
      </el-row>
    </div>
    <div class="address mt-3 p-3">
      <div class="top">
        <div class="title">发票信息</div>
      </div>
      <div class="fpStatus mt-2">
        <div class="tit mr-5">发票状态</div>
        未开票
      </div>
      <div style="display: flex; align-items: center">
        <div class="fpStatus mr-40">
          <div class="tit mr-5">发票类型</div>
          <el-radio-group v-model="radio1">
            <el-radio value="1">电子发票</el-radio>
            <el-radio value="2">纸质发票</el-radio>
          </el-radio-group>
        </div>
        <div class="fpStatus">
          <div class="tit mr-5">发票抬头</div>
          <el-radio-group v-model="radio2">
            <el-radio value="1">企业</el-radio>
            <el-radio value="2">个人</el-radio>
          </el-radio-group>
        </div>
      </div>
      <el-form class="mt-2" :model="form" label-width="auto" style="width: 100%" label-position="left">
        <el-row :gutter="40">
          <el-col :span="8" :xs="24">
            <el-form-item label="企业名称" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="识别号" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="开户银行" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="银行卡号" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="企业电话" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="联系电话" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="16" :xs="24">
            <el-form-item label="企业地址" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="邮箱地址" class="formItem">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div style="display: flex; justify-content: center">
              <div class="back">返回</div>
              <div class="submit ml-10">提交发票信息</div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  id: Number
})
const tableData = [
  {
    goodsInfo: "2016-05-03",
    price: "Tom",
    number: "No. 189, Grove St, Los Angeles",
    sum: "",
    status: "",
    coupon: "新人优惠券",
    sku: "220g海苔味盒装",
  },
];
const radio1 = ref("1");
const radio2 = ref("1");
const form = ref([]);
onMounted(() => {
  console.log(props.id);

})
</script>

<style lang="scss" scoped>
.back {
  width: 114px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d3d9dd;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
}

.submit {
  cursor: pointer;
  width: 156px;
  height: 36px;
  background-color: #1f75ec;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  border-radius: 4px;
}

.formItem {
  width: 100%;
}

.fpStatus {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
}

.infoItem {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;

  .etxt {
    font-weight: 600;
    color: #1f75ec;
    cursor: pointer;
  }
}

.tab {
  display: flex;
  align-items: center;

  .img {
    width: 36px;
    height: 36px;
    margin-right: 10px;
  }
}

.w-250 {
  max-width: 250px;
  line-height: 1.3;
}

.address {
  background-color: #fff;

  .top {
    display: flex;
    align-items: center;

    .title {
      font-size: 18px;
      color: #333;
    }

    .edit {
      cursor: pointer;
      font-size: 14px;
      color: #1f75ec;
      font-weight: 600;
    }
  }
}

.stepBox {
  width: 100%;
  background-color: #fff;

  .t-1 {
    font-size: 18px;
    color: #333333;
  }

  .rp-Box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
</style>
